<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('项目落地情况统计表') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目名称')" prop="dealName">
        <el-input v-model="queryParams.dealName" :placeholder="$t('项目名称')" />
      </el-form-item>
      <el-form-item :label="$t('年份')" prop="nianfen">
        <el-date-picker
          v-model="queryParams.nianfen"
          type="year"
          clearable
          size="small"
          value-format="yyyy"
          placeholder="选择年"
        />
      </el-form-item>
      <el-form-item :label="$t('季度')" prop="jidu">
        <el-select v-model="queryParams.jidu" :placeholder="$t('季度')" clearable>
          <el-option
            v-for="dict in jiduOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['deal:implementation:export']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t('导出') }}</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="implementationList" border>
      <el-table-column :label="$t('序号')" type="index" fixed="left" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('公司名称')" fixed="left" align="center" prop="companyName" show-overflow-tooltip width="200">
        <template slot-scope="scope">
          {{ scope.row.companyName }}
        </template>
      </el-table-column>
      <!--      <el-table-column :label="$t('公司简称')" align="center" prop="companyShortName" min-width="200" show-overflow-tooltip />-->
      <el-table-column :label="$t('项目名称')" fixed="left" align="center" prop="dealName" show-overflow-tooltip width="200">
        <template slot-scope="scope">
          <router-link
            target="_blank"
            :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId}}"
            class="link_a"
          >{{ scope.row.dealName }}</router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('年份')" align="center" prop="nianfen" min-width="150" />
      <el-table-column :label="$t('季度')" align="center" prop="jidu" min-width="150" :formatter="jiduFormat" />
      <el-table-column :label="$t('面积(m²)')" align="center" prop="dealArea" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.dealArea) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('位置')" align="center" prop="dealLocation" min-width="200" show-overflow-tooltip />
      <el-table-column :label="$t('目前员工人数')" align="center" prop="companyUpStaffNumber" min-width="200" show-overflow-tooltip />
      <el-table-column :label="$t('目前项目进展情况')" align="center" prop="dealCurrentProjectProgress" min-width="200" show-overflow-tooltip />
      <el-table-column :label="$t('下一步计划')" align="center" prop="nextPlan" min-width="200" show-overflow-tooltip />
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>

  import { listCompanyImplementationAll } from '@/api/sass/lanwan/companyImplementation'

  export default {
    data() {
      return {
        // 季度字典
        jiduOptions: [],
        // 项目落地情况集合
        implementationList: [],
        total: 0,
        loading: false,
        queryParams: {
          dealName: undefined,
          companyName: undefined,
          nianfen: undefined,
          jidu: undefined,
          pageNum: 1,
          pageSize: 10
        }
      }
    },
    mounted() {
      this.getList()
      this.getDicts('report_type').then(response => {
        this.jiduOptions = response.data
      })
    },
    methods: {
      // 季度字典翻译
      jiduFormat(row, column) {
        console.log(column)
        return this.selectDictLabel(this.jiduOptions, row.jidu)
      },
      getList() {
        this.loading = true
        listCompanyImplementationAll(this.queryParams).then(res => {
          this.implementationList = res.rows
          this.total = res.total
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      /** 搜索按钮操作 */
      queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.queryHandle()
      },
      /** 导出按钮操作 */
      exportHandle() {
        if (this.queryParams.nianfen && this.queryParams.jidu) {
          this.downLoadExcel('/implementation/companyImplementation/exportImplementationAll', this.queryParams)
        } else {
          this.msgError(this.$t('请先选择年份和季度'))
        }
      }
    }
  }
</script>

<style scoped>

</style>
